<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">

		<view :style="{ height: navTop + 'px' }"></view>

		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>成片库</text>
		</view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<!-- <uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons> -->
			<text style="color: 333333;font-size: 33rpx;"> 成片库</text>
		</view>

		<image class="materialLibraryImg" :src="ProductLibraryFive" mode="scaleToFill"></image>

		<view class=" margin-top_60rpx">
			<!-- <picker mode="selector" @change="bindPickerChange2" :data-userId="item.id" :range="groupList"
				:range-key="'groupName'">
				<view class="">
					<text style="font-weight: bold;">全部类型</text>
					<uni-icons style="margin-left: 5rpx;font-weight: bold " color="#333333" type="down"
						size="18"></uni-icons>
				</view>
			</picker> -->
			<view class="flex-between "  v-if="userInfo.id">
				<view class="search-content flex-start-center " style="width: 520rpx;">
				
					<uni-icons style="margin-left: 20rpx;" color="#00000048" type="search" size="24"></uni-icons>
				
					
					<input placeholder="请输入搜索内容" v-model="name" @input="changeInput" 
						style="width: 520rpx;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				
				
				</view>
				
				<view class=" ">
				
					<uv-checkbox-group v-model="checkboxValue" shape="circle" @change="changeCheckAll">
						<uv-checkbox v-for="(item, index) in checkboxList" :key="index" :label="item.name"
							:name="item.name"></uv-checkbox>
					</uv-checkbox-group>
				</view>
			</view>



			<mescroll-body v-if="userInfo.id" ref="mescrollRef " @init="mescrollInit" :down="downOption" :up="upOption"
				@down="downCallback" @up="upCallback">

				<view class="solder flex-wrap-flex-start">

					<view class="text-align_center  margin-bottom_20rpx widthCalce"
						:style="{marginRight:((index+1) % 3)==0?'0':'0rpx'}" @click="goDetail(item)"
						v-for="(item,index) in folderPage" :key="index">
						<image class="solderImg" :src="group3153" mode=""></image>
						<view class="font-overflow2" style="font-size: 26rpx;height: 77rpx;">
							{{item.name}}
						</view>
						<view class="" style="font-size: 26rpx;color: #898888;">
							{{item.create_time}}
						</view>

						<view class="flex-between margin-top_10rpx">


							<uv-checkbox-group shape="circle" v-model="radiovalue" @change="e=>changeCheck(e,item.id)">
								<uv-checkbox :name="item.id"></uv-checkbox>
							</uv-checkbox-group>

							<image class="editImg" :src="group3128" mode="" @click.stop="editFn(item.id)"></image>
						</view>

					</view>

				</view>
			</mescroll-body>
			<mescroll-empty v-else :option="optEmpty"></mescroll-empty>
			<view class="" style="height: 60rpx;">

			</view>

			<view class="v-call">
				<view class="flex-around">
					<view class="flex-column" @click="goTo(1)">
						<image class="addSolder" :src="group3148" mode=""></image>
						<view style="font-size: 26rpx;margin-top: 10rpx">新建文件夹</view>

					</view>
					<view class="flex-column" @click="deleteFn()">
						<image class="addSolder" :src="group3150" mode=""></image>
						<view style="font-size: 26rpx;margin-top: 10rpx;">删除文件夹</view>

					</view>
				</view>
			</view>
			<sunui-popup ref="serviceItemsPopup">
				<template v-slot:content>

					<view class="serviceItemsContain ">
						<view class="top flex-between">
							<view class="">

							</view>
							<text>修改文件夹名称</text>
							<uni-icons @click='closeWriteOffIcon()' class="uniIcon" type="closeempty" size="22"
								style="color: #07070791;">
							</uni-icons>
						</view>

						<view class="card margin-bottom_50rpx">
							<view class="myNmae">

								<view class="">
									<input class="uni-inputsa"  type="text" v-model="solderName"
										placeholder="请输入标题" />
								</view>


							</view>

						</view>

						<view class="PublishTags flex" @click="payNow()">
							确定
						</view>

					</view>

				</template>
			</sunui-popup>
			<sunui-popup ref="pop">
				<template v-slot:content>

					<view class="serviceItemsContain ">
						<view class="top flex-between">
							<view class="">

							</view>
							<text>新建文件夹</text>
							<uni-icons @click='numCloseWriteOffIcon()' class="uniIcon" type="closeempty" size="22"
								style="color: #07070791;">
							</uni-icons>
						</view>

						<view class="card margin-bottom_50rpx">
							<view class="myNmae">

								<view class="">
									<input class="uni-inputsa" @input="changeInputTop" type="text" v-model="solderName"
										placeholder="请输入文件夹名称" />
								</view>


							</view>

						</view>

						<view class="PublishTags flex" @click="confirm()">
							确定
						</view>

					</view>

				</template>
			</sunui-popup>
			<!-- 
			<sunui-popup ref="pop">
				<template v-slot:content>
					<view class="v-pop-cls">
						<view class="margin-bottom_50rpx font-size_36rpx display-a-jc">新建文件夹</view>
						<view class="display-a-js">
							<view>
								文件夹名称
								<span class="must">*</span>
							</view>
							<input style="height: 76rpx;padding: 0 22rpx;" type="text" v-model="solderName"
								class="input-frame" placeholder="请输入文件夹名称" placeholder-class="placeholder" />
						</view>


						<view class="sunui-flex-space-around margin-top_60rpx">
							<view class="confirm-btn" @click="confirm()">确认</view>
							<view class="cancel-btn" @click="cancel()">取消</view>
						</view>
					</view>
				</template>
			</sunui-popup> -->

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: uni.getStorageSync('uid'),
				group3153: this.$imgs.group3153,
				group3128: this.$imgs.group3128,
				group3150: this.$imgs.group3150,
				group3148: this.$imgs.group3148,
				ProductLibraryFive: this.$imgs.ProductLibraryFive,
				groupList: [],
				user: uni.getStorageSync('user'),

				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				// 带分页
				folderPage: [],
				navTop: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				arr: [],
				radiovalue: [],
				checkboxValue: '',
				// 基本案列数据
				checkboxList: [{

					disabled: false,
					name: '全选'
				}],
				// 文件夹名字
				solderName: '',
				ids: '',
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: "",
				optEmpty: {
					tip: '暂无数据  ~ '
				},
				userInfo: {},
				memberSetObj: {},
				name:''

			}
		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;
			// this.refresh()
			this.createdgetSystemInfo()
			this.userInfos()
			this.memberSetFn()

		},
		computed: {


		},
		onShow() {
			// this.refresh()
			this.userInfos()
			setTimeout(() => {
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})
			}, 500)
		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},
		methods: {
			changeInput(e){
				console.log(e)
				this.name=e.detail.value
				
				setTimeout(() => {
					this.$nextTick(() => {
						this.mescroll?.resetUpScroll();
					})
				}, 500)
			},
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.userInfo = result.data
					uni.setStorageSync('user', result.data);


				}
			},
			refresh() {
				if (!uni.getStorageSync('uid')) {
					uni.showModal({
						title: '登录提示',
						content: '请先登录',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.switchTab({
									url: `/pages/mine/mine`
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},

			closeWriteOffIcon() {
				this.solderName = ''
				this.$refs.serviceItemsPopup.close()
			},
			async payNow() {
				if (!this.solderName) {
					this.$sun.toast('请输入文件夹名称', 'none')
					return
				}
				let info
				info = {
					// 用户id
					uid: uni.getStorageSync('uid'),
					type: 2,
					name: this.solderName,
					id: this.ids

				}

				// 新建文件夹
				const result = await this.$http.get({
					url: this.$api.folderSave,
					data: {
						...info
					}
				});
				if (result.errno == 0) {
					this.solderName = ''
					this.$sun.toast(result.message)
					this.$refs.serviceItemsPopup.close()

					this.$nextTick(() => {
						this.mescroll?.resetUpScroll();
					})
				} else {
					this.solderName = ''
					this.$sun.toast(result.message)
				}
			},
			handleLogin() {
				if (uni.getStorageSync('uid')) {
					return true;
				} else {
					setTimeout(() => {
						this.$sun.toast("请先授权登录");
					}, 500)
					uni.switchTab({
						url: `/pages/mine/mine`
					});
				}
			},
			editFn(id) {
				console.log(id)
				this.$refs.serviceItemsPopup.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 99999
				});
				this.ids = id

			},
			numCloseWriteOffIcon() {
				this.solderName = ''
				this.$refs.pop.close()
			},

			async upCallback(scroll) {

				const result = await this.$http.get({
					url: this.$api.folderPage,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						type: 2,
						page: scroll.num,
						psize: 10,
						name:this.name?this.name:''




					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.folderPage = [];
					this.folderPage = this.folderPage.concat(result.data.list);
					this.folderPage = this.folderPage.map((item, index) => {
						return {
							name: item.name,
							create_time: item.create_time,
							id: item.id,
							index: index
						}
					})
					console.log(this.folderPage)

				}
			},
			navBack() {
				this.$sun.navSwitch('/pages/index/index')
			},
			changeCheck(e, index) {
				console.log(e, index)


				if (this.arr.includes(index)) {

					let a = this.arr.indexOf(index); // 查找索引
					this.arr.splice(a, 1);
					if (this.arr != -1) {
						this.radiovalue = this.arr
					}

				} else {
					this.arr.push(index)


					console.log(this.arr)

					this.radiovalue = this.arr
				}

				if (this.radiovalue.length == this.folderPage.length) {
					this.checkboxValue = ['全选']
				}
				if (this.radiovalue.length != this.folderPage.length) {
					this.checkboxValue = []
				}




			},
			changeCheckAll(e) {
				console.log(e[0])

				if (e[0] == '全选') {
					let ids = this.folderPage.map(item => item.id);
					this.radiovalue = ids
					this.arr = ids
				} else {
					this.radiovalue = []
					this.arr = []
				}
			},


			deleteFn() {
				console.log(this.arr)
				if (this.arr.length) {
					uni.showModal({
						title: '是否确定要删除',
						content: '是否要删除该文件夹，如果删除，将不可恢复，请您谨慎选择',
						success: async (res) => {
							if (res.confirm) {
								const result = await this.$http.post({
									url: this.$api.folderDel,
									data: {
										// 用户id
										uid: uni.getStorageSync('uid'),
										type: 2,

										folder_id: this.arr.length == 1 ? this.arr[0] : this.arr.join(
											','),


									}
								});
								if (result.errno == 0) {
									this.checkboxValue = []

									this.radiovalue = []
									this.arr = []
									this.$sun.toast(result.message)
									this.$nextTick(() => {
										this.mescroll?.resetUpScroll();
									})

								}



							} else if (res.cancel) {

							}
						}
					});
				} else {
					this.$sun.toast('请选择至少一个文件夹删除', 'none')
				}
			},
			goDetail(item) {
				// this.$sun.navGo('/pages/creatCenter/piecemeal/piecemealCenterDetail',{
				// 	info:JSON.stringify(item)
				// })

				this.$sun.navGo('/pagesA/creatCenter/piecemeal/piecemealCenterDetail?info=' + encodeURIComponent(JSON
					.stringify(
						item)))
			},
			changeBox(e) {
				console.log(e)
			},
			async confirm() {
				if (!this.solderName) {
					this.$sun.toast('请输入文件夹名称', 'none')
					return
				}
				let info
				if (this.id) {
					info = {
						// 用户id
						uid: uni.getStorageSync('uid'),
						type: 2,
						name: this.solderName,
						id: this.id ? this.id : ''

					}
				} else {
					info = {
						// 用户id
						uid: uni.getStorageSync('uid'),
						type: 2,
						name: this.solderName,

					}
				}

				// 新建文件夹
				const result = await this.$http.get({
					url: this.$api.folderSave,
					data: {
						...info
					}
				});
				if (result.errno == 0) {
					this.solderName = ''
					this.$sun.toast(result.message)
					this.$refs.pop.close()

					this.$nextTick(() => {
						this.mescroll?.resetUpScroll();
					})
				} else {
					this.solderName = ''
					this.$sun.toast(result.message)
				}




			},
			cancel() {
				this.$refs.pop.close()
			},
			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {


					}
				});
				if (result.errno == 0) {

					this.memberSetObj = result.data

					console.log(result.data)

				}
			},

			// type 1:新建文件夹 2:删除文件夹 3:上传素材 4:素材搬家
			goTo(type) {
				if (this.handleLogin()) {
					if (this.userInfo.is_member == 0 && this.memberSetObj.is_open == 1) {
						uni.showModal({
							title: '温馨提示',
							content: '你当前不是会员，请开通会员后享受该功能',
							confirmText: '开通会员',
							confirmColor: '#4A5EFF',
							success: async (res) => {
								if (res.confirm) {


									this.$sun.navGo('/pages/contactUs/memberCenter')

								} else if (res.cancel) {

								}
							}
						});
					} else {
						console.log('点击========type', type);
						if (type == 1) {
							this.$refs.pop.show({
								anim: 'bottom',
								position: 'bottom',
								shadeClose: false, //false使用户不能点击其它关闭页面
								topclose: false,
								zIndex: 99999
							});
						}
						if (type == 2) {
							let ids = [];
							this.fileList.map(d => {
								if (d.checked) {
									ids.push(d.id);
								}
							});
							console.log('ids', ids, ids.length, 'ids.length <= 0', ids.length <= 0);
							if (ids.length <= 0) {
								this.$sun.toast('请选择文件夹', 'none');
								return;
							}
							uni.showModal({
								title: '提示',
								content: '确定要删除文件夹吗',
								success: async res => {
									if (res.confirm) {
										const result = await this.$http.post({
											url: this.$api.batchDelete,
											data: {
												ids: ids
											}
										});
										if (result.errno == 0) {
											this.$sun.toast('删除成功');
											setTimeout(() => {
												this.$at.releaseKey('submit');
												this.query();
											}, 1000);
										} else {
											this.$sun.toast(result.message, 'none');
											this.$at.releaseKey('submit');
										}
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							/* this.$at.uniDoFunc({
								key: 'submit',
								success: async () => {
									this.$at.lockKey('submit');
									// 筛选选中的文件
									this.delFile(ids);
								}
							}); */
						}
						if (type == 3) {
							this.$sun.navGo('/pagesA/creatCenter/uploadFiles/uploadFiles', {
								info: JSON.stringify({
									type: 1,
									...this.info
								})
							});

						}
						if (type == 4) {
							let ids = [];
							this.fileList.map(d => {
								if (d.checked) {
									ids.push(d.id);
								}
							});
							this.moveQueryId = ids;
							console.log('ids', ids, ids.length, 'ids.length <= 0', ids.length <= 0);
							if (ids.length <= 0) {
								this.$sun.toast('请选择文件夹', 'none');
								return;
							}
							if (ids.length > 1) {
								this.$sun.toast('素材搬家仅需选1个文件夹', 'none');
								return;
							}
							this.queryUserFile();
						}
					}
				}




			},

		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		// height: 100vh;
		padding: 20rpx;
		position: relative;
		background-color: #fff;
		.search-content {
						    margin-top: 30rpx;
							background: #FFFFFF;
						
							// margin-bottom: 30rpx;
						
							
							height: 66rpx;
							border-radius: 230rpx;
						
							image {
								width: 30rpx;
								height: 30rpx;
								margin-right: 10rpx;
							}
						
							view {
								color: #fff;
							}
						
						}

		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}

		.materialLibraryImg {
			// width: 720rpx;
			height: 182.94rpx;
			border-radius: 20rpx;
			margin-top: 30rpx;

		}

		.serviceItemsContain {
			padding: 0rpx 30rpx 30rpx 30rpx;
			background-color: #fff;

			height: auto;
			overflow-x: auto;

			.PublishTags {
				z-index: 99;
				margin-top: 10rpx;
				height: 102rpx;
				border-radius: 20rpx;
				color: #fff;


				bottom: 20rpx;
				background: rgb(120, 93, 246);
			}

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: left;
				}

				.uni-input {

					height: 100rpx;
				}

				.uni-inputsa {
					width: 100%;
					height: 90rpx;
					border-radius: 20rpx;
					background: rgb(245, 245, 245);
					margin: 20rpx 0;
					padding: 0rpx 20rpx;
				}

				.uni-inputs {
					text-align: left !important;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}





			.top {
				padding: 30rpx 0;
				width: 100%;

				text {
					color: rgb(0, 0, 0);
					font-size: 36rpx;
					font-weight: 400;
				}
			}

		}

		// “新建文件夹” 弹框
		.v-pop-cls {
			padding: 40rpx 26rpx 60rpx;
			border-radius: 20rpx;
			width: 644rpx;
			background-color: #fff;

			.must {
				color: red;
				margin-left: 8rpx;
			}

			.radio-cls {
				transform: scale(0.8);
			}

			.input-frame,
			.no-input-frame {
				padding: 20rpx;
				border-radius: 10rpx;
				width: 360rpx;
			}

			.input-frame {
				border: 2rpx solid #d9d9d9;
			}

			.no-input-frame {
				background: #f0f0f0;
				border: 2rpx solid #f0f0f0;
			}

			.input-frame2 {
				width: 400rpx;
			}
		}

		.allSelect {
			position: absolute;
			right: 20rpx;
			top: 400rpx;
			z-index: 999;
		}

		.solder {
			margin-top: 50rpx;

			width: 700rpx;

			.widthCalce {
				width: calc(100% /3);
			}

			.solderImg {
				width: 149.24rpx;
				height: 149.3rpx;
			}

			.editImg {
				width: 34.02rpx;
				height: 34rpx;
			}

		}

		.v-call {
			font-size: 29rpx;
			font-weight: 700;
			border-radius: 140rpx;
			padding: 20rpx 40rpx;
			background: #FFFFFF;
			color: #442D25;
			// color: #ffffff;
			width: 90%;
			position: fixed;
			bottom: 40rpx;
			left: 6%;
			border: none;

			z-index: 999;

			box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.1);

			.addSolder {
				width: 40.3rpx;
				height: 40.3rpx;
			}

		}

	}
</style>